<!--
 * @Description: 
 * @Author: mmzhang
 * @Date: 2022-08-12 13:27:45
 * @LastEditTime: 2022-09-08 20:46:59
-->
<template>
  <div>
    <Row>
      <Col span="11">
        <DatePicker
          :type="dateType"
          :transfer="transfer"
          placeholder="开始日期"
          :clearable="clearable"
          v-model="startTime"
          :options="startOption"
          @on-change="dateChange" />
      </Col>
      <Col span="2" style="text-align: center">-</Col>
      <Col span="11">
        <DatePicker
          :type="dateType"
          :transfer="transfer"
          placeholder="结束日期"
          :clearable="clearable"
          :options="endOption"
          v-model="endTime"
          @on-change="dateChange" />
      </Col>
    </Row>
  </div>
</template>
<script>
  import moment from 'moment'
  export default {
    props: {
      clearable: {
        type: Boolean,
        default: false
      },
      dateType: {
        type: String,
        default: 'date'
      },
      dateFormat: {
        type: String,
        default: 'YYYY-MM-DD'
      },
      transfer: {
        type: Boolean,
        default: true
      },
      value: {
        type: Array,
        default: () => {
          return []
        }
      },
      minimumDate: String // 最小可选择的时间，之前的时间不可选
    },
    watch: {
      value: {
        handler(val, oldVal) {
          this.startTime = val && val.length ? val[0] : ''
          this.endTime = val && val.length ? val[1] : ''
        },
        deep: true
      }
    },
    data() {
      return {
        startTime: '',
        endTime: '',
        startOption: {
          // 指定开始限制时间
          disabledDate: (date) => {
            let data = this.endTime == '' ? Date.now() : new Date(this.endTime)
            return this.minimumDate
              ? date < moment(this.minimumDate).subtract(1, 'day') || date > data
              : date > data
          }
        },
        endOption: {
          // 指定终止日期
          disabledDate: (date) => {
            // 考虑月份的情况
            let data =
              this.startTime == ''
                ? ''
                : this.dateType == 'date'
                ? new Date(this.startTime)
                : moment(new Date(this.startTime)).subtract(1, 'months')
            return this.minimumDate
              ? date > Date.now() || date < data || date < moment(this.minimumDate).subtract(1, 'day')
              : date > Date.now() || date < data
          }
        }
      }
    },
    methods: {
      dateChange(val) {
        this.startTime = this.startTime != '' ? moment(this.startTime).format(this.dateFormat) : ''
        this.endTime = this.endTime != '' ? moment(this.endTime).format(this.dateFormat) : ''
        let checkTime = [this.startTime, this.endTime]
        this.$emit('input', checkTime) //更新父级组件的value
        this.$emit('onChange')
      }
    }
  }
</script>
